drow3DAxes(context);
var input = document.getElementsByTagName("input");

var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

function addHint(){
    for(let i=0;i<=35;i++){
        input[i].onmouseover = hint;
    }
}
addHint();

async function buOnclick() {
    var a11 = input[0].value * 1;
    var a12 = input[1].value * 1;
    var a13 = input[2].value * 1;
    var a21 = input[3].value * 1;
    var a22 = input[4].value * 1;
    var a23 = input[5].value * 1;
    var a31 = input[6].value * 1;
    var a32 = input[7].value * 1;
    var a33 = input[8].value * 1;
    var a1 = input[9].value * 1;
    var a2 = input[10].value * 1;
    var a3 = input[11].value * 1;
    var b11 = input[12].value * 1;
    var b12 = input[13].value * 1;
    var b13 = input[14].value * 1;
    var b21 = input[15].value * 1;
    var b22 = input[16].value * 1;
    var b23 = input[17].value * 1;
    var b31 = input[18].value * 1;
    var b32 = input[19].value * 1;
    var b33 = input[20].value * 1;
    var b1 = input[21].value * 1;
    var b2 = input[22].value * 1;
    var b3 = input[23].value * 1;
    var c11 = input[24].value * 1;
    var c12 = input[25].value * 1;
    var c13 = input[26].value * 1;
    var c21 = input[27].value * 1;
    var c22 = input[28].value * 1;
    var c23 = input[29].value * 1;
    var c31 = input[30].value * 1;
    var c32 = input[31].value * 1;
    var c33 = input[32].value * 1;
    var c11 = input[33].value * 1;
    var c2 = input[34].value * 1;
    var c3 = input[35].value * 1;

    a1 = a11 + a21 + a31;
    a2 = a12 + a22 + a32;
    a3 = a13 + a23 + a33;
    b1 = b11 + b21 + b31;
    b2 = b12 + b22 + b32;
    b3 = b13 + b23 + b33;
    c11 = c11 + c21 + c31;
    c2 = c12 + c22 + c32;
    c3 = c13 + c23 + c33;

    var bb = Math.max(Math.abs(-a1 + a2), Math.abs(-a1 + a3), Math.abs(-b1 + b2), Math.abs(-b1 + b3),
        Math.abs(-c11 + c2), Math.abs(-c11 + c3));
    checkAxes(mycanvas, context, bb, bb, 2);

    context.save();
    context.lineWidth = 3;
    context.fillStyle = "red";
    await drow3DVector2(context, 0, 0, 0, a11, a21, a31);
    addFont_3D(context, "a1", a11, a21, a31);
    await drow3DVector2(context, a11, a21, a31, a12, a22, a32);
    addFont_3D(context, "a2", a12, a22, a32);
    await drow3DVector2(context, a12, a22, a32, a13, a23, a33);
    addFont_3D(context, "a3", a13, a23, a33);
    await drow3DVector(context, a13, a23, a33,false);

    await drow3DVector2(context, 0, 0, 0, b11, b21, b31);
    addFont_3D(context, "b1", b11, b21, b31);
    await drow3DVector2(context, b11, b21, b31, b12, b22, b32);
    addFont_3D(context, "b2", b12, b22, b32);
    await drow3DVector2(context, b12, b22, b32, b13, b23, b33);
    addFont_3D(context, "b3", b13, b23, b33);
    await drow3DVector(context, b13, b23, b33,false);

    await drow3DVector2(context, 0, 0, 0, c11, c21, c31);
    addFont_3D(context, "c1", c11, c21, c31);
    await drow3DVector2(context, c11, c21, c31, c12, c22, c32);
    addFont_3D(context, "c2", c12, c22, c32);
    await drow3DVector2(context, c12, c22, c32, c13, c23, c33);
    addFont_3D(context, "c3", c13, c23, c33);
    await drow3DVector(context, c13, c23, c33,false);

    input[9].value = a1;
    input[10].value = a2;
    input[11].value = a3;
    input[21].value = b1;
    input[22].value = b2;
    input[23].value = b3;
    input[33].value = c11;
    input[34].value = c2;
    input[35].value = c3;

    context.restore();

}

show.onclick = buOnclick;